<template>
    <div class="container">
        <!-- 导航指引 -->
        <el-breadcrumb separator="/" class="nav">
           <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>日志管理</el-breadcrumb-item>
           <el-breadcrumb-item>操作日志</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <el-form :inline="true"  class="demo-form-inline" :model="queryMap">
                <el-form-item label="操作人">
                   <el-input @keyup.enter.native="search" v-model="queryMap.username"  placeholder="操作人" style="width:280px" clearable ></el-input>
                </el-form-item>
                <el-form-item label="ip地址">
                   <el-input @keyup.enter.native="search" v-model="queryMap.ip" placeholder="ip地址" style="width:280px" clearable  ></el-input>
                </el-form-item>
                <el-form-item label="操作位置">
                   <el-input @keyup.enter.native="search" v-model="queryMap.location" placeholder="操作位置" style="width:280px" clearable ></el-input>
                </el-form-item>
                <el-form-item>
                   <el-button type="primary" icon="el-icon-search" @click="search" >查询</el-button>
                   <el-button  icon="el-icon-delete" @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0">批量</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  :data="LogData"
                       border 
                       style="width: 100%" 
                       max-height="500" 
                       stripe 
                       @selection-change="selsChange">
               <el-table-column type="selection" width="60"></el-table-column>
               <el-table-column prop="operation" label="操作" width="150"></el-table-column>
               <el-table-column prop="method" label="方法" width="170" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="params" label="参数" width="120" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="time" label="耗时" width="120" sortable>
                    <template slot-scope="scope">
                       <el-tag v-if="scope.row.time>=2000" size="mini" type="danger">{{scope.row.time+"毫秒"}}</el-tag>
                       <el-tag v-else-if="scope.row.time>=1000&&scope.row.time<=2000" size="mini">{{scope.row.time+"毫秒"}}</el-tag>
                       <el-tag v-else size="mini" type="success">{{scope.row.time+"毫秒"}}</el-tag>
                    </template>  
               </el-table-column>
               <el-table-column prop="location" label="操作地点" width="230"></el-table-column>
               <el-table-column prop="ip" label="IP地址" width="180"></el-table-column>
               <el-table-column prop="username" label="操作人" width="200"></el-table-column>
               <el-table-column prop="createTime" label="时间" width="160" sortable></el-table-column>
               <el-table-column prop="operation" label="操作" fixed="right" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="del(scope.row.id)"><i class="el-icon-delete"></i> 删除</el-button>
                    </template>
               </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                class="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.queryMap.pageNum"
                :page-sizes="[10,15,20]"
                :page-size="this.queryMap.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sels:[], //批量点击的数量
            LogData: [],
            total:0,
            queryMap:{ pageNum:1 ,pageSize:10 , location:"" }
        };
    },
    created(){
        this.getLogList()
    },
    methods:{
        // 获取日志列表
        async getLogList(){
            let res = await this.$http.get("log/findLogList",{
                params:this.queryMap
            });
            console.log(res);
            if(res.data.code === 200){
                this.$message({
                    // message: res.data.msg,
                    message:"获取操作日志列表成功~",
                    type: 'success'
                });
                this.total =res.data.data.total;
                this.LogData=res.data.data.rows;
            }else{
                return this.$message.error("获取列表失败");
            }
        },
        // 删除
        async del(id){
            let res = await this.$confirm('此操作将永久删除该登录日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(() => {
                this.$message({
                   type: 'info',
                   message: '已取消删除'
                });          
            });
            if(res === "confirm"){
                let res= await this.$http.delete("log/delete/" + id);
                console.log(res);
                if(res.data.code ===200){
                    this.$message({
                       type: 'success',
                       message: '删除成功!'
                    });
                    this.getLogList();
                }else{
                    this.$message.error("获取列表失败")
                }
            }
        },
         // 批量删除
        async deleteFileOrDirectory(){
            let ids = this.sels.map(item=>item.id).join();
            let res = await this.$confirm('此操作将永久删除该登录日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(() => {
                this.$message({
                   type: 'info',
                   message: '已取消删除'
                });          
            });
            if(res === "confirm"){
                let res = await this.$http.delete("log/batchDelete/" + ids);
                console.log(res);
                if(res.data.code ===200){
                    this.$message({
                       type: 'success',
                       message: '删除成功!'
                    });
                    this.getLogList();
                }else{
                    this.$message.error("获取列表失败")
                }
            }
        },
        selsChange(sels) {
            this.sels = sels;
        },
        // 搜索
        search(){
            this.queryMap.pageNum =1;
            this.getLogList()
        },
        handleSizeChange(val) {
            this.queryMap.pageSize = val;
            // console.log(newSize);
            this.getLogList()
        },
        handleCurrentChange(val) {
            this.queryMap.pageNum = val;
            this.getLogList()
            console.log(val);
        }
    }
};
</script>

<style lang="less" scope>
.container{
    width: 100%;
    height: 100vh;
    background-color:#EAEDF1;
    .nav{
        padding-top: 10px;
        padding-left: 20px;
    }
    .box-card{
        width: 99%;
        height: 90vh;
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 50px;
        .page{
            padding-top: 10px;
        }
    }
}
</style>